<template>
	<div class="homeAdver">
		<h1 class="pageTitle">首页地图</h1>
		<div class="mapExplain">
			红色圈为新增坐标，蓝色圈为已添加坐标
		</div>
		<div class="mapImg" style="width: 1000px">
			<img src="../assets/img/map.jpg" alt="地图" />
			<div class="coordinates" v-for="val in mapCoordinates" :key="val.id" :style="{top:mapPosition[val.id-1].top,left:mapPosition[val.id-1].left}">
				<el-popover
				    placement="top"
				    title="编辑坐标"
				    width="80"
				    trigger="click">
				    <el-form>
					  	<el-form-item>
					   		<div>当前模式:{{val.type==1?"全景图":"轮播图"}}</div>
					   		<el-button @click="changeType(val.id,val.href)">更换模式</el-button>
					  	</el-form-item>
					</el-form>
				    <div class="blue-circle" slot="reference" :id="val.id"></div>
				</el-popover>
			</div>
		</div>
		<div class="changeTypeDialog">
			<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
				<el-form label-position="left" label-width="100px" :model="mapForm">
					<el-form-item label="类型">
						<el-radio-group v-model="mapForm.type">
							<el-radio label="1">全景图</el-radio>
							<el-radio label="2">轮播图</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="全景图链接" v-if="mapForm.type=='1'">
						<el-input v-model="mapForm.vrUrl"></el-input>
					</el-form-item>
					<el-form-item v-for="val in swiperImg" label-width="0px" v-if="mapForm.type=='2'">
						<div style="display: inline-block;padding-right: 100px;">轮播图 图{{val}}</div>
						<el-button type="primary">新增/替换</el-button>
						<el-button type="danger">删除</el-button>
					</el-form-item>
				</el-form>
				<el-button type="warning" @click="dialogFormVisible=false">提交</el-button>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import config from '@/assets/js/config.js'
	export default {
		data(){
			return {
				mapCoordinates:[],
				mapPosition:[{
					id:1,
					top:"70%",
					left:"75%"
				},{
					id:2,
					top:"70%",
					left:"44%"
				},{
					id:3,
					top:"54%",
					left:"52%"
				},{
					id:4,
					top:"41.5%",
					left:"39%"
				},{
					id:5,
					top:"41.5%",
					left:"54%"
				},{
					id:6,
					top:"13%",
					left:"30%"
				},{
					id:7,
					top:"28%",
					left:"19%"
				},{
					id:8,
					top:"54.6%",
					left:"10%"
				}],
				labelPosition:"",
				mapForm:{
				 	name: '',
		          	vrUrl: '',
		          	type: '1'
				},
				dialogFormVisible:false,
				dialogTitle:"",
				swiperImg:[1,2,3,4,5]
			}
		},
		created(){
			this.$require.get(config.vrList).then((res)=>{
				console.log(res);
				this.mapCoordinates = res.data.data.rows;
			})
		},
		methods:{
			changeType(idx,_url){
				this.dialogFormVisible=true;
				this.dialogTitle = "编辑坐标"+idx;
				this.mapForm.vrUrl = _url;
			}
		}
		
	}
</script>

<style lang="scss">
.homeAdver{
	overflow: hidden;
	padding: 20px 30px;
	.pageTitle{
		font-size: 30px!important;
	}
	.headerButton{
		margin: 20px 0;
		overflow: hidden;
	}
	.mapImg{
		position: relative;
		img{
			width: 100%;
		}
	}
	.coordinates{
		position: absolute;
		top: 100px;
		left: 100px;
		.blue-circle{
			width: 50px;
			height: 50px;
			border-radius: 50px;
			border: 10px solid #00f;
			-webkit-user-select: none;
			text-align: center;
			box-sizing: border-box;
		}
	}
}
</style>